<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Homework 2-5</title>
    <script src="./jquery-1.12.4.js"></script>
    <script src="./index.js"></script>
    <link rel="stylesheet" href="./Q4.css">
    <link rel="stylesheet" href="./Q5.css">
    <style>
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
            background-color: gray;
            width: 440px;
        }

        ul li {
            display: inline-block;
            color: yellow;
            font-size: 100px;
            cursor: pointer;
        }

        #Q3 {
            width:500px;
            background-color: orange;
        }

        #messageBox{
            width:500px;
            background-color: orange;
        }

        #messageBox span{
            margin-left: 50px;
        }
    </style>
</head>
<body>
    <div>
        <h2>1、星星图</h2>
        <ul class="Q1ul">
            <li>☆</li>
            <li>☆</li>
            <li>☆</li>
            <li>☆</li>
            <li>☆</li>
        </ul>
    </div>
    <div>
        <h2>2、计算器</h2>
        <form action="">
            <input type="text" name="" id="number1" placeholder="输入一个整数" pattern="\d+">
            <select name="" id="operator">
                <option value="">请选择
                <option value="+">+</option>
                <option value="-">-</option>
                <option value="*">*</option>
                <option value="/">/</option>
            </select>
            <input type="text" name="" id="number2" placeholder="输入一个整数" pattern="\d+">
            <input type="button" id="Q2submit" value="="></input>
            <input type="text" name="" id="result">
        </form>
    </div>
    <div>
        <h2>3、留言板</h2>
        <form action="" id="Q3">
            <div>
                <label for="username">昵称:</label>
                <input type="text" id="username" name="username">
            </div>
            <div>
                <label for="textContent">留言</label>
                <textarea id="textContent" nametextContent cols="50" rows="10" style="margin-left:4px;"></textarea>
            </div>
            <div class="submit" style="margin-left: 430px;">
                <input type="checkbox" name="anonymous" id="anonymous">
                <label for="anonymous">匿名</label><br>
                <input type="button" id="submit" value="发表">
            </div>
        </form>
        <div id="messageBox">
        </div>
    </div>
    <div>
        <h2>4、轮播图1</h2>
        <div class="Q4carousel">
            <ul class="Q4ul">
                <li>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </li>
            </ul>
        </div>
        <input type="button" value="下一张" class="Q4btn">
    </div>
    <div>
        <h2>5、轮播图2</h2>
        <div class="Q5carousel">
            <ul>
                <li>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </li>
                <li>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </li>
                <li>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </li>
                <li>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </li>
            </ul>
        </div>
        <input type="button" value="下一张" class="Q5btn">
    </div>
</body>
</html>